<template>
    <div>
    <transition name="bounce">
        <div class="my-dialog"  v-show="visible">
            <div class="dialog" :style="{height:$attrs.height,width:$attrs.width}">
                <div class="hint">
                    <span class="hint-left">{{$attrs.hint||'提示'}}</span>
                    <div class="close-right" @click="shadeDialog">
                      <span class="el-icon-close" ></span>
                    </div>
                </div>
                <div class="message icon-message">
                    <i class="el-icon-warning"></i>
                    <slot name="message">请确认当前操作是否合法</slot>
                </div>
                <div class="messageBtn">
                <span class="btn leftBtn" @click="alertDialog(3)">
                  <slot name="leftBtn">取消</slot>
                </span>
                    <span class="btn rightBtn" @click="alertDialog(1)">
                    <slot name="rightBtn">确认</slot>
                </span>
                </div>
            </div>
            <transition name="bounce">
            <div class="shade" v-show="shadeVisible">
                <div class="affirm" :style="{height:$attrs.height,width:$attrs.width}">
                    <div class="message">
                        <span>确认关闭?</span>
                        <div class="close-right" @click="alertDialog(0)">
                            <span class="el-icon-close" ></span>
                        </div>
                    </div>
                    <div class="messageBtn">
                    <span class="btn leftBtn" @click="alertDialog(0)">
                      <span>取消</span>
                    </span>
                    <span class="btn rightBtn" @click="alertDialog(2)">
                      <span>确认</span>
                    </span>
                    </div>
                </div>
            </div>
            </transition>
        </div>
    </transition>
    <transition name="bounce">
        <div v-if="$route['name']==='login'" v-show="cancel" class="cancel">
            <i class="el-icon-info"></i>
            <span>{{$attrs.cancel}}</span>
        </div>
    </transition>
   <!-- <transition name="bounce">
        <div class="success">
            <i class="el-icon-success"></i>
            <span>{{$attrs.success}}</span>
        </div>
    </transition>-->
    </div>
</template>
<script>
    export default {
    name:'my-dialog',
        data(){
        return{
            shadeVisible:false,
            cancel:false
        }
        },
        props:{
            visible:{
                type:Boolean,
                default:false
            },
            success:Function,
            fail:Function
        },
        methods:{
            shadeDialog(){
                this.shadeVisible=true;
            },
            alertDialog(close){
                if(close === 0){
                    this.shadeVisible=false;
                }else if(close === 1) {
                    if(typeof this.success === 'function'){
                        this.success();
                        this.$emit('update:visible',false)
                    }else {
                        this.$emit('update:visible',false)
                    }
                }else if(close === 2){
                        this.$emit('update:visible',false);
                    this.shadeVisible=false;
                }else if(close === 3){
                    this.cancel = true;
                     let _this = this ;
                    setTimeout(function () {
                        _this.cancel = false;
                    }, +this.$attrs.schedule);
                    this.$emit('update:visible',false);
                }
            },
        },

    }
</script>
<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    .my-dialog{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.1);
        /*z-index: 99;*/
        overflow: hidden;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9999;
    }
    .dialog{
        width: 80%;
        background: #fff;
        border-radius: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .shade{
        width: 100%;
        height: 100%;
        position: fixed;
        background: rgba(0,0,0,0.1);
        z-index: 999;
        overflow: hidden;
    }
    .affirm{
        width: 60%;
        background: #fff;
        border-radius: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .hint{
        height: 80px;
        width: 100%;
        box-sizing: border-box;
        padding: 40px 40px 20px 40px;
        font-size: 32px;
        color: #303133;
    }
    .close-right{
        float: right;
        width: 34px;
        height: 34px;
        position: relative;
    }
    .el-icon-close{
      color: #909090;
      font-size: 42px;
    }
    .close-right:hover>.el-icon-close{
        color: #67da60;
    }
    .message{
        padding:40px;
        color: #606266;
        font-size: 30px;
    }
    .message>i{
        color:#e6a23c;
        font-size: 42px;
        display: inline-block;
        vertical-align: middle;
    }
    .icon-message>span{
      font-size: 32px;
      vertical-align: middle;
    }
    .message>span{
        display: inline-block;
        font-size: 32px;
        vertical-align: middle;
    }
    .messageBtn{
        padding:20px 40px 40px 40px;
        text-align: right;
        box-sizing: border-box;
    }
    .btn{
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        text-align: center;
        box-sizing: border-box;
        transition: .1s;
        font-weight: 500;
        font-size: 26px;
        padding: 24px 40px;
        border-radius: 12px;
        margin: 0 20px;
    }
    .leftBtn{
        border: 2px solid #dcdfe6;
        background: #fff;
        color: #606266;
    }
    .leftBtn:hover{
        border: 2px solid #BCF8FF;
        background: #EAFCFF;
        color: #67da60;
    }
    .rightBtn{
        border: 2px solid #67da60;
        background: #67da60;
        color: #fff;
    }
    .rightBtn:hover{
        border: 2px solid #67da60;
        background: #67da60;
    }
    .cancel, .success{
        width: 60%;
        box-sizing: border-box;
        border-radius: 10px;
        padding: 30px 40px;
        position: absolute;
        left: 50%;
        top: 10%;
        transform: translate(-50%,-50%);
        z-index: 9999;
    }
    .cancel{
        background: #c8c8c2;
    }
    .success{

    }
    .cancel>i, .cancel>span{
        font-size: 28px;
        color: #5b5b58;
    }
    .success{

    }
    .bounce-enter{
        opacity: 0;
    }
    .bounce-enter-active{
        transition: all .3s ease;
    }
    .bounce-leave-active{
        transition: all .3s ease;
    }
    .bounce-leave-to{
        opacity: 0;
    }
</style>
